<template>
    <view class="main">
        <view class="wp">
            <view class="m1">
                <div class="outer-container">
                    <view class="ul-list1">
                        <view class="li" style="display: flex;align-items: center;">
                            <view class="pic">
                                <image :src="userInfo.img" mode="">
                                </image>
                            </view>
                            <view class="desc">
                                {{ userInfo.name }}
                            </view>
                        </view>
                    </view>

                    <view class="header" style="position: relative;">
                        <img :src="userInfo.is_vip === 0 ? '/static/bg.png' : '/static/vip_bg.png'" style="width: 90%;"
                            alt="" srcset="">
                        <div
                            style="position: absolute;top: 12px;left: 30px;color: white;font-size: 17px;font-weight: 700;">
                            {{ userInfo.is_vip === 0 ? '购买充值代理' : userInfo.vip_name }}
                        </div>
                        <div
                            style="position: absolute;top: 39px;left: 30px;color: white;font-size: 12px;font-weight: 350;">
                            {{ userInfo.is_vip === 0 ? '代理可享受最高5元返现' : '有效期:' + userInfo.start_time + '-' + userInfo.end_time
                            }}
                        </div>
                        <div class="buy-button" @click="show = true">
                            {{ userInfo.is_vip === 0 ? '去购买' : '去续费' }}
                        </div>
                    </view>

                    <view class="earnings">
                        <view class="left">
                            <span class="label">总收益 ￥</span>
                            <span class="value">{{ userInfo.price || 0 }} 元</span>
                        </view>
                        <view class="right" @click="goToPage('/pages/profile/Commissions')">
                            <span class="details">收益明细</span>
                            <image class="arrow" src="/static/right.png" mode="aspectFit"></image>
                        </view>
                    </view>
                </div>


                <view class="container" @click="goToPage('/pages/profile/Commissions')">
                    <div class="left-section">
                        <image class="avatar" src="/static/1.png" mode="aspectFit"></image>
                        <div class="info">
                            <span class="name">已提现收益</span>
                            <span class="amount">
                                <span style="font-size: 12px;">￥</span>
                                {{ userInfo.take_price || 0 }} 元
                            </span>
                        </div>
                    </div>
                    <div class="right-section">
                        <image class="avatar" src="/static/2.png" mode="aspectFit"></image>
                        <div class="info">
                            <span class="name">未提现收益</span>
                            <span class="amount">
                                <span style="font-size: 12px;">￥</span>
                                {{ userInfo.not_price }} 元
                            </span>
                        </div>
                    </div>
                </view>

                <view class="m1">
                    <view class="ul-list4">
                        <view class="li" v-for="item in menuItems" :key="item.text" @click="handleClick(item)">
                            <view class="pic">
                                <image :src="item.icon" mode="aspectFit" />
                            </view>
                            <view class="txt">
                                {{ item.text }}
                            </view>
                        </view>
                    </view>
                </view>

            </view>
        </view>

        <u-popup :show="show" @close="close" mode="bottom" :round="20" closeable>
            <view class="number">
                <view class="list">
                    <div class="title">代理购买</div>
                    <div style="display: flex;padding: 15px;background: white;">
                        <view :class="num == item.id ? 'item real' : 'item'" v-for="item in list" :key="item.id"
                            @click="pick(item.id)" style="margin:10px">
                            <view class="card">
                                <view class="top">
                                    <text style="font-size: 13px;">{{ item.name }}</text>
                                </view>
                                <text class="money"><span style="font-size: 12px;">￥</span>{{ item.pay_price }}</text>
                                <text class="price">￥{{ item.price }}</text>
                            </view>
                        </view>
                    </div>

                    <div style="display: flex;background: white;width: 100%;margin: 10px 0;">
                        <view style="margin:5px;width: 100%;">
                            <view class="card">
                                <view class="top"
                                    style="display: flex;align-items: center;justify-content: space-between;">
                                    <div style="display: flex;align-items: center;">
                                        <img style="width: 40px;height: 40px;margin: 10px;" src="/static/7.png" alt=""
                                            srcset="">
                                        <text style="font-size: 13px;">微信支付</text>
                                    </div>
                                    <img style="width: 20px;height: 20px;margin: 10px;" src="/static/8.png" alt=""
                                        srcset="">
                                </view>
                            </view>
                        </view>
                    </div>

                    <div style="display: flex;background: white;width: 100%;margin: 10px 0;padding-top: 20px;">
                        <u-button style="width: 90%;" shape="circle" color="#4262F1" type="primary" text="确定"
                            @click="pay_price"></u-button>
                    </div>
                </view>
            </view>
        </u-popup>

        <!-- 推广链接 -->
       <!-- <u-popup :show="isVisible" @close="handleClose" mode="center" :round="20">
            <view class="popup-content">
                <view class="popup-title">推广链接</view>
                <view class="popup-link">{{ tuiguangurl }}</view>
                <view class="popup-copy" @click="copyLink">复制链接</view>
            </view>
        </u-popup> -->

        <!-- 联系客服 -->
        <u-popup :show="isContact" @close="handleCloseContact" mode="center" :round="20">
            <view class="popup-content">
                <img style="width: 80px;" src="../../static/ren.png" alt="">
                <view class="popup-link">客服电话</view>
                <view class="popup-link" style="margin: 10px 10px 0 10px;">{{ userInfo.mobile }}</view>
            </view>
        </u-popup>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
import { Centerindex, getInviteUrl, getVipList, buyVip } from "@/api/apiService";

export default {
    data() {
        return {
            num: null,
            show: false,
            list: [],
            userInfo: [],
            menuItems: [
                { text: '我的订单', icon: '/static/3.png', path: '/pages/profile/order' },
                // { text: '我的邀请', icon: '/static/4.png', path: '/pages/profile/popularize' },
                { text: '返现收益', icon: '/static/4.png', path: '/pages/profile/Commissions' },
				{ text: '提现明细', icon: '/static/3.png', path: '/pages/profile/history' },
                // { text: '推广海报', icon: '/static/5.png', path: '/pages/profile/tuiguang' },
                // { text: '推广链接', icon: '/static/6.png', path: '', popup: 'tuiguang' },
                { text: '联系客服', icon: '/static/6.png', path: '', popup: 'kefu' }
            ],
            isVisible: false, // 推广链接
            tuiguangurl: '', // 推广的链接
            isContact: false //联系客服
        }
    },

    onShow() {
        this.CenterindexRequest()
    },

    created() {
        this.getVipList()
    },

    methods: {
        async pay_price() {
            const params = {
                cardId: this.num
            }

            try {
                const response = await buyVip(params);
                const { mp_app_id, timeStamp, nonceStr, paySign, package: packageValue } = response.data;

                WeixinJSBridge.invoke('getBrandWCPayRequest', {
                    "appId": mp_app_id,
                    "timeStamp": timeStamp,
                    "nonceStr": nonceStr,
                    "package": packageValue,
                    "signType": "RSA",
                    "paySign": paySign
                }, (res) => {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                        this.$refs.uToast.show({ message: '支付成功' });
                    } else {
                        console.log("支付失败", res);
                    }
                });
            } catch (error) {
                console.error("请求预订单失败", error);
            }
        },

        // 获取会员卡列表
        async getVipList() {
            const response = await getVipList()
            this.list = response.data.list
        },

        // 关闭联系客服
        handleCloseContact() {
            this.isContact = false;
        },

        // 复制网址
        copyLink() {
            uni.setClipboardData({
                data: this.tuiguangurl,
                success() {
                    uni.showToast({
                        title: '链接已复制',
                        icon: 'success'
                    });
                }
            });
        },

        // 打开推广链接
        async handleClick(item) {
            if (item.popup === 'tuiguang') {
                await this.getInviteUrl()
                this.isVisible = true;
            } else if (item.popup === 'kefu') {
                this.isContact = true;
            } else if (item.path) {
                this.goToPage(item.path);
            }
        },

        // 获取推广链接
        async getInviteUrl() {
            const response = await getInviteUrl()
            this.tuiguangurl = response.data
        },

        // 关闭推广链接
        handleClose() {
            this.isVisible = false;
        },

        // 跳转页面
        goToPage(routePath) {
            if (routePath) {
                uni.navigateTo({
                    url: routePath
                });
            }
        },

        // 获取个人中心数据
        async CenterindexRequest() {
            const params = {
            };
            const response = await Centerindex(params);
            if (response.code === 90098) {
                window.location.href = response.data.url;
            } else {
                this.userInfo = response.data;
                uni.setStorageSync('userInfo', response.data);
            }
        },

        // 关闭购买弹窗
        close() {
            this.show = false
        },

        // 选中购买内容
        pick(index) {
            console.log(index);
            this.num = index;
        }
    }
}
</script>

<style scoped lang="scss">
.real {
    border: 2rpx solid #f88700;
}

// 推广链接 联系客服
.popup-content {
    margin: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.popup-title,
.popup-link,
.popup-copy {
    width: 100%;
    text-align: center;
    margin: 5px;
}

.popup-copy {
    color: blue;
    margin: 10px 0 0 0;
    cursor: pointer;
}


.title {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px;
    background-color: #F6F6F6;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.number {
    display: flex;
    flex-direction: column;
    align-items: center;

    .list {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        background-color: #F6F6F6;

        .item {


            border: 1px solid white;
            width: 194rpx;
            height: 110px;
            background: #ffffff;
            box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            display: flex;

            .card {
                width: 194rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .top {
                    display: flex;
                    align-items: center;

                    >text {
                        font-size: 32rpx;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #666666;
                        line-height: 44rpx;
                    }

                    >image {
                        width: 30rpx;
                        height: 30rpx;
                    }
                }

                .money {
                    font-size: 48rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #4262F1;
                    line-height: 34rpx;
                    margin-top: 15px;
                    margin-bottom: 15px;
                }

                .price {
                    font-size: 22rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 34rpx;
                    margin-top: 12rpx;
                }
            }
        }

        .real {
            border: 2rpx solid #f88700;
        }

        &:after {
            content: '';
            width: 194rpx;
        }
    }

    .sure {
        width: 582rpx;
        height: 80rpx;
        background: #ff6a5f;
        border-radius: 40rpx;
        text-align: center;

        >text {
            font-size: 28rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: 80rpx;
        }
    }
}

.container {
    display: flex;
    justify-content: space-between;
    padding: 20px 0px;
}

.left-section,
.right-section {
    flex: 1;
    display: flex;
    align-items: center;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}

.info {
    display: flex;
    flex-direction: column;

}

.name {
    font-weight: 400;
    color: #333333;
    font-size: 12px;
}

.amount {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
    display: flex;
    align-items: center;
}

.earnings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    width: 92vw;
}

.left {
    display: flex;
    align-items: center;
}

.label {
    font-weight: 400;
    font-size: 24rpx;
    margin-right: 10px;
}

.value {
    font-weight: 700;
    font-size: 48rpx;
}

.right {
    display: flex;
    align-items: center;
}

.details {
    font-weight: 400;
    font-size: 24rpx;
    margin-right: 5px;
}

.arrow {
    width: 8px;
    height: 8px;
}

.outer-container {
    background-image: url('/static/bg-me.png');
    background-size: cover;
    background-position: center;
    width: 100vw;
}



.buy-button {
    position: absolute;
    right: 50px;
    background-color: white;
    font-size: 12px;
    font-weight: 500;
    color: #5D96FB;
    padding: 5px 10px;
    border-radius: 20px;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

page {
    background-color: #fff;
}

view,
text,
image,
navigator,
input {
    box-sizing: border-box;
}

.wp {
    margin: 0 auto;
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.wp {
    padding: 0 30rpx;
}

.ul-list1 {
    padding: 50rpx 0;
    overflow: hidden;
    position: relative;
}

.ul-list1 .pic {
    float: left;
    width: 122rpx;
    height: 122rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15rpx;
}

.ul-list1 .pic image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ul-list1 .desc {
    font-weight: 400;
    letter-spacing: 1rpx;
    float: left;
    font-size: 22px;
    color: #333333;
    margin-left: 10rpx;
}

.ul-list2 {
    overflow: hidden;
    margin-bottom: 50rpx;
    display: flex;
    justify-content: space-between;
}

.ul-list2 .li text {
    display: block;
    text-align: center;
}

.ul-list2 .li .con {
    display: block;

}

.ul-list2 .li .s1 {
    margin-bottom: 15rpx;
    font-size: 38rpx;
    color: #000;
    font-weight: bold;
}

.ul-list2 .li text {
    font-size: 22rpx;
    color: #666666;
}

.ul-list3 {
    background-color: #5b31ff;
    border-radius: 20rpx;
    padding: 30rpx 24rpx 54rpx 42rpx;
    margin-bottom: 32rpx;
    position: relative;
}

.ul-list3 .con {
    display: block;
    overflow: hidden;
}

.ul-list3 .pic {
    float: left;
    width: 82rpx;
    height: 82rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-top: 30rpx;
}

.ul-list3 .pic image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ul-list3 .txt {
    padding-top: 15rpx;
    overflow: hidden;
    padding-left: 40rpx;
}

.ul-list3 .txt .text {
    float: left;
    width: 80%;
}

.ul-list3 .txt .h3 {
    font-size: 26rpx;
    color: #fff;
    margin-bottom: 22rpx;
}

.ul-list3 .txt .desc {
    position: relative;
    display: inline-block;
    border-radius: 30rpx;
    padding: 6rpx 20rpx;
    font-size: 12px;
    color: #8881a8;
    background-color: rgb(255, 255, 255);
}

.ul-list3 .txt .desc .icon {
    position: absolute;
    top: -10rpx;
    left: -20rpx;
    width: 32rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
}

.ul-list3 .txt .desc .icon image {
    display: inline-block;
    width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.ul-list3 .txt .desc .arrow1 {
    display: inline-block;
    width: 14rpx;
    height: 24rpx;
    margin-left: 15rpx;
    margin-top: -4rpx;
    vertical-align: middle;
}

.ul-list3 .txt .arrow {
    float: right;
    width: 41rpx;
    height: 70rpx;
    line-height: 68rpx;
    text-align: center;
    margin-top: 20rpx;
    border-radius: 5rpx;
    background-color: #997aff;
    /* background-color: rgba(92, 43, 255,0.1); */
}

.ul-list3 .txt .arrow image {
    display: inline-block;
    width: 14rpx;
    height: 24rpx;
    vertical-align: middle;
}

.ul-list4 {
    padding-bottom: 180rpx;
}

.ul-list4 .li {
    margin: 10px;
    overflow: hidden;
    padding: 28rpx 0 25rpx;
    position: relative;
}

.ul-list4 .li::after {
    content: '';
    position: absolute;
    width: 15rpx;
    height: 15rpx;
    top: 44rpx;
    right: 15rpx;
    border-top: 2rpx #c7c7c7 solid;
    border-left: 2rpx #c7c7c7 solid;
    transform: rotate(135deg);
}

.ul-list4 .con {
    display: block;
    overflow: hidden;
}

.ul-list4 .li .pic {
    float: left;
    width: 36rpx;
    height: 38rpx;
    line-height: 36rpx;
    text-align: center;
    margin-right: 15rpx;
}

.ul-list4 .li .pic image {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;

}

.ul-list4 .li .txt {
    float: left;
    font-size: 26rpx;
    padding-top: 6rpx;
}

.ul-list5 {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx 0;
    box-shadow: #c1c1b9 5px -3px 17px 1px;
}

.ul-list5 .li {
    float: left;
    width: 25%;
    text-align: center;
    display: block;
}

.ul-list5 .li .pic {
    display: block;
}

.ul-list5 .li .txt {
    display: inline-block;

}

.ul-list5 .li text {
    font-size: 20rpx;
    color: #666666;
}

.ul-list5 .li:hover {
    color: #5b31ff;
}
</style>
